<template>
<!-- 指标维护 -->
  <div v-loading="loading" element-loading-text="加载中。。。">
    <el-card style="overflow:visible;">
      <el-form :model="form" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :md="6" :lg="4">
            <el-form-item label="序号" prop="ID">
              <el-input v-model="form.ID" placeholder="请输入序号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="6" :lg="4">
            <el-form-item label="指标维度" prop="AGENTFLAG">
              <el-select v-model="form.AGENTFLAG" filterable placeholder="请选择指标维度">
                <el-option v-for="item in flagList" :key="item.value" :label="item.name" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="指标名称" prop="KPI_NAME">
              <el-input v-model="form.KPI_NAME" placeholder="请输入指标名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col  :lg="4" :md="6">
            <el-form-item label="指标KEY"  prop="KPI_KEY">
              <el-input v-model="form.KPI_KEY" placeholder="请输入指标key" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="缓存标识" prop="CACHEFLAG">
              <el-select v-model="form.CACHEFLAG" clearable placeholder="请选择缓存标识">
                <el-option v-for="item in STATUSLIST" :key="item.value" :label="item.name" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="2" :md="3" class="searchBtnMarginTop">
            <el-button type="primary" icon="el-icon-search" :loading="loading" size="mini" @click="query(1)">查询
            </el-button>
          </el-col>
          <el-col :md="3" :lg="2" class="searchBtnMarginTop">
            <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('form')">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top:10px;">
      <el-row :gutter="10">
        <el-col :lg="2" :md="3" v-if="btnPermission('Button_User_Add')">
          <el-button type="primary" size="mini" @click="addlocalCard" icon="el-icon-plus">新增</el-button>
        </el-col>
        <el-col :lg='2' :md='3' v-if="btnPermission('Button_DevInfo_Edit')">
          <el-button type='primary' size='mini' icon='el-icon-edit' class='b-button' :disabled="currentRow.length!=1"
            @click='DialogShow'>修改</el-button>
        </el-col>
        <el-col :lg="2" :md="3" v-if="btnPermission('Button_User_Delete')">
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="del" :disabled="currentRow.length!=1">删除
          </el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData" ref="table" border class="tableMarginTop" highlight-current-row
        @selection-change="handleCurrentChange" header-row-class-name="tableHeaderClass" style="min-height:390px;">
        <el-table-column type="selection" width="40px"></el-table-column>
        <el-table-column prop="ID" label="序号" width="120px"></el-table-column>
        <el-table-column prop="KPI_KEY" label="指标KEY"></el-table-column>
        <el-table-column prop="KPI_NAME" label="指标名称" width="150"></el-table-column>
        <el-table-column prop="AGENTFLAG" label="指标维度" :formatter="dataFormat"></el-table-column>
        <!-- <el-table-column prop="EXPRESSION" label="英文表达式" width="220"></el-table-column> -->
        <el-table-column prop="EXPRESSION_NAME" label="中文表达式" width="220"></el-table-column>
        <el-table-column prop="CACHEFLAG" label="缓存标识" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="OPERANO" width="100px" label="操作员"></el-table-column>
        <el-table-column prop="WORKDATE" label="最后更新日期" width="110px" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="WORKTIME" label="最后更新时间" width="110px"></el-table-column>
        <el-table-column prop="KEYLIST" label="指标列表" width="220"></el-table-column>
      </el-table>
      <div style="text-align:right;margin-top:20px;" v-show="this.tableData">
        <el-pagination :current-page="currentPage" background @size-change="handleSizeChange"
          :page-sizes="[10,25,50,100]" :page-size="pageSize" layout="total,sizes, prev, pager, next, jumper"
          :total="totalRcrdNum" @current-change="changePage"></el-pagination>
      </div>
    </el-card>
    <!-- 弹窗 -->
    <keep-alive>
      <component :is="dialogList.addaddlocalCardDialog" :option="dialogOptions" @refreshTable="query(1)"></component>
    </keep-alive>
  </div>
</template>

<script>
  import toolBox from "@/common/utils/toolBox";
  import addaddlocalCardDialog from "./dialog/addDialog";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import query from "@/message/paramManagement/indicatorMaintenance/query";
  import add from "@/message/paramManagement/indicatorMaintenance/add";
  import dele from "@/message/paramManagement/indicatorMaintenance/del";
  import requestYg from "@/common/utils/requestYg";
  import Update from "@/message/paramManagement/indicatorMaintenance/update";

  export default {
    name: "",
    data() {
      return {
        "flag": {
          "agent": "坐席",
          "queue": "队列",
        },
        "FLAG": {
          "0": "是",
          "1": "否"
        },
        STATUSLIST: [{
            name: "是",
            value: "0"
          },
          {
            name: "否",
            value: "1"
          },
        ],
        flagList: [{
            name: "坐席",
            value: "agent"
          },
          {
            name: "队列",
            value: "queue"
          },
        ],
        pageSize: undefined, //表格每页的条数
        form: {
          ID: "",
          KPI_KEY: "",
          KPI_NAME: "",
          AGENTFLAG: "",
          CACHEFLAG: "",
        },
        currentRow: [], //表格当前选中行
        currentPage: 1, //表格当前页
        totalRcrdNum: 0,
        tableData: [], //表格 数据
        loading: false, //loading遮罩
        total: 0, //表格总条数
        checkedUser: false, //控制按钮是否可用
        isDisabledDel: false,
        dialogList: {
          //指定被渲染组件列表
          addaddlocalCardDialog,
        },
        dialogOptions: {
          //新增
          isShow: false,

        },
      };
    },
    computed: {},

    created: function () {
      this.pageSize = getGlobalParams.get("PageSize");
      this.query(1);
    },

    watch: {},
    methods: {
      async query(num) {
        let resBody = new query();
        this.currentPage = num;
        resBody.data.ID = this.form.ID; //ID  序号
        resBody.data.KPI_KEY = this.form.KPI_KEY; //KPI_KEY ：指标KEY
        resBody.data.KPI_NAME = this.form.KPI_NAME; //KPI_NAME ：指标名称
        resBody.data.AGENTFLAG = this.form.AGENTFLAG;
        resBody.data.CACHEFLAG = this.form.CACHEFLAG;
        resBody.data.pageflag = 4; //分页标识(1-最后一页,2-上一页,3-下一页,4-当前页)
        resBody.data.pagerownum = this.pageSize; //表格每页的条数
        resBody.data.currpage = num; //当前页
        requestYg(resBody)
          .then(response => {
            // 总条数
            this.totalRcrdNum = response.RSP_BODY.TotalNum ?
              response.RSP_BODY.TotalNum :
              0;
            if (response.SYS_HEAD.ReturnCode === "000000") {
              this.tableData = response.RSP_BODY.Result || [];
            } else {
              this.$message({
                type: "error",
                message: response.SYS_HEAD.ReturnMessage
              });
              this.tableData = [];
            }
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          });
      },
      del() { //删除弹出
        this.$confirm("该条指标维护将被删除, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.paramDel();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
        this.limstr = "";
      },
      paramDel() { //删除交易限额
        this.loading = true;
        let resBody = new dele();
        resBody.data.ID = this.currentRow[0].ID;
        requestYg(resBody)
          .then(response => {
            if (response.SYS_HEAD.ReturnCode === "000000") {
              this.loading = false;
              this.$message({
                type: "success",
                message: "指标维护删除成功!"
              });
              this.query(1);
            } else {
              this.loading = false;
              this.$message({
                type: "success",
                message: "指标维护删除失败!"
              });
            }
          })
          .catch(error => {
            this.loading = false;
          });
      },
      // 格式化表格
      dataFormat(row, column, cellValue) {
        // 坐席指标维度
        if (column.property == "AGENTFLAG")
          return this.flag[row[column.property]];

        if (column.property == "CACHEFLAG")
          return this.FLAG[row[column.property]];
        // 时间格式
        if (column.property == "WORKDATE")
          return toolBox.timeFormat2Date([row[column.property]]);
        if (column.property == "WORKTIME")
          return toolBox.timeFormat2Time([row[column.property]]);
      },
      // 添加
      addlocalCard() {
        //添加
        this.dialogOptions.isShow = true;
        this.dialogOptions.isChecked = false;
        this.dialogOptions.title = "指标维护新增";
        this.dialogOptions.flagList = this.flagList;
        this.dialogOptions.log = "1"; //添加
      },
      // 对话框展示
      DialogShow() {
        this.dialogOptions.isShow = true;
        this.dialogOptions.isChecked = true;
        this.dialogOptions.currentRow = this.currentRow[0];
        this.dialogOptions.title = "指标维护修改";
        this.dialogOptions.flagList = this.flagList;
        this.dialogOptions.log = "2"; //修改
      },
      // 重置查询条件
      clearForm(item) {
        this.$refs["" + item].resetFields();
      },
      changePage(val) {
        this.currentPage = val;
        // console.log("changePage",val);
        this.query(val);
      },
      refreshTable() {
        //刷新数据并清除选中的数据
      },
      handleCurrentChange(val) {
        //表格选中行改变事件设置当前行的值（currentRow）已经改变控制按钮是否可用
        // console.log("handleCurrentChange,",val);
        this.currentRow = val;
      },
      handleSizeChange(val) {
        this.query(1);
      }
    }
  };

</script>


<style lang="scss" scoped>
  .selectTree {
    min-width: 150px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .dialog-text {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: red;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .el-card {
    width: 100%;
  }

  .el-form-item {
    margin-left: 30px;
  }

  .el-form-item1 {
    margin-left: 10px;
  }

  .box2-button {
    width: 80px;
  }

  .el-card {
    overflow: inherit;
  }

</style>
